<script>
import { schoolList } from '@/api/constant'
export default {
  name: 'SchoolPage',
  data () {
    return {
      schoolList
    }
  },
  methods: {
    setScroll (refId) {
      const refs = this.$refs[refId]
      if (refs) {
        const dom = refs[0]
        document.documentElement.scrollTop = dom.offsetTop
      }
    }
  },
  watch: {
    '$route.params.id': {
      handler (newV) {
        // console.log(this.$refs)
        this.setScroll(newV)
      }
    }
  },
  mounted () {
    const refId = this.$route.params.id
    this.setScroll(refId)
  }
}
</script>

<template>
  <div class="school-page">
    <div class="w">
      <div
        class="card"
        v-for="item in schoolList"
        :key="item.title"
        :ref="item.ref"
      >
        <div class="title">
          <div class="text">{{ item.title }}</div>
        </div>
        <div class="details">
          <p v-for="(details, i) in item.detailsList" :key="i">{{ details }}</p>
        </div>
        <div class="images-list">
          <div class="image-item" v-for="image in item.images" :key="image">
            <img :src="image" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.school-page {
  padding: 80px 0;
  .w {
    width: 1200px;
    margin: 0 auto;
    .card {
      padding-bottom: 15px;
      .title {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 90px;
        background-color: #414099;
        border-bottom: 4px solid #6f6edf;
        border-radius: 5px 5px 0 0;
        color: #fff;
        font-size: 24px;
      }
      .details {
        p {
          margin-top: 20px;
          line-height: 2;
          text-indent: 2em;
          font-size: 18px;
        }
      }

      .images-list {
        display: flex;
        .image-item {
          flex: 1;
          margin-right: 20px;
          img {
            display: block;
            width: 100%;
            margin-top: 20px;
          }
        }
      }
    }
  }
}
</style>
